import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/model/alert_model.dart';
import 'package:syn_4s/core/model/short_model.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';
import 'package:syn_4s/ui/widgets/my_drop_down.dart';

import '../../core/utils/date_format_utils.dart';
import '../../core/viewmodel/main_view_model.dart';
import 'custom_ui.dart';
import 'main_fold.dart';

class MainAlert extends StatefulWidget {
  final Key? scrollKey;
  final MainViewModel viewModel;
  final String? title;

  const MainAlert(
      {super.key, required this.viewModel, this.scrollKey, this.title});

  @override
  State<MainAlert> createState() => _MainAlertState();
}

class _MainAlertState extends State<MainAlert> {
  final ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    addScrollListener(_controller, widget.viewModel.isAlertScrollable);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    GlobalKey globalKey = GlobalKey();
    return MainFold(
      scrollKey: widget.scrollKey,
      title: widget.title ?? context.l10n.alert,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          InkWell(
            onTap: () {
              FocusScope.of(context).requestFocus(FocusNode());
              widget.viewModel.getAlertTypes(context, globalKey);
            },
            child: Container(
                key: globalKey,
                width: double.infinity,
                margin: EdgeInsets.only(left: 8.px, right: 58.px),
                padding: EdgeInsets.only(left: 8.px, right: 2.px),
                height: 40.px,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(24.px)),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: Obx(() => Text(
                            maxLines: 1,
                            "${context.l10n.alert_view}${widget.viewModel.alertName.value}",
                            style:
                                TextStyle(color: Colors.black, fontSize: 14.px),
                            overflow: TextOverflow.ellipsis,
                          )),
                    ),
                    const Icon(Icons.chevron_right)
                  ],
                )),
          ),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 8.px, vertical: 6.px),
            height: 240,
            child: Obx(() => ListView.builder(
                  controller: _controller,
                  physics: widget.viewModel.isLockScrollable.value
                      ? const AlwaysScrollableScrollPhysics()
                      : const NeverScrollableScrollPhysics(),
                  itemBuilder: (ctx, index) {
                    return buildContent(widget.viewModel.alerts[index]);
                  },
                  itemCount: widget.viewModel.alerts.length,
                )),
          ),
        ],
      ),
    );
  }

  Widget buildContent(Alert model) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 8.px),
      margin: EdgeInsets.only(bottom: 4.px),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(2.px)),
        color: Colors.white60,
      ),
      child: Row(
        children: [
          Expanded(child: Text(model.alertName ?? "")),
          Expanded(
              child: Text(
            DateFormatUtils.dateTimeToStr(model.alertAt,
                format: "dd-MM-yyyy HH:mm:ss"),
            textAlign: TextAlign.center,
          )),
          Expanded(
              child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              const Icon(
                Icons.warning_amber,
                color: AppTheme.warningColor,
              ),
              SizedBox(
                width: 2.px,
              ),
              Flexible(
                child: Text(model.reason ?? "",
                    style: const TextStyle(color: AppTheme.orangeColor)),
              )
            ],
          )),
        ],
      ),
    );
  }

  Widget buildDivider() {
    return Container(
      color: AppTheme.backgroundColors,
      width: 1.px,
    );
  }

  Widget buildContentBox({double? width, Widget? child}) {
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 2.px),
        width: width ?? 74.px,
        alignment: Alignment.center,
        child: child);
  }

  Widget buildDeviceBox(String data, {double? width}) {
    return buildContentBox(
        width: width,
        child: Text(data, style: const TextStyle(color: AppTheme.infoTextColors)));
  }

  Widget buildDataBox(String data, String time, {double? width}) {
    return buildContentBox(
        width: width,
        child: Column(
          children: [
            Text(
              data,
              style: TextStyle(
                  fontSize: 16.px,
                  color: AppTheme.orangeColor,
                  fontWeight: FontWeight.w900),
            ),
            Text(
              time,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 13.px, color: AppTheme.infoTextColors),
            ),
          ],
        ));
  }
}
